<template>
  <div class="init-info-container">
    <el-card class="init-info-card">
      <template #header>
        <div class="card-header">
          <h2>考试系统学生身份检测</h2>
          <p>请准确填写分配的信息，这将作为您的考试凭证</p>
        </div>
      </template>
      <el-form
          ref="infoFormRef"
          :model="infoForm"
          :rules="rules"
          label-width="120px"
          label-position="top"
          status-icon
      >
        <el-form-item label="学校编号" prop="examRoom">
          <el-input
              v-model="infoForm.schoolId"
              placeholder="请输入学校编号"
              clearable
          />
        </el-form-item>
        <el-form-item label="机房号" prop="examRoom">
          <el-input
              v-model="infoForm.examRoom"
              placeholder="请输入机房编号"
              clearable
          />
        </el-form-item>

        <el-form-item label="学生姓名" prop="studentName">
          <el-input
              v-model="infoForm.studentName"
              placeholder="请输入您的真实姓名"
              clearable
          />
        </el-form-item>

        <el-form-item label="班级考试编号" prop="examNumber">
          <el-input
              v-model="infoForm.examNumber"
              placeholder="请输入您的班级考试编号"
              clearable
          />
        </el-form-item>
        <el-form-item label="机器编号" prop="machineId">
          <el-select
              v-model="infoForm.machineId"
              placeholder="请选择您的机器编号"
              style="width: 100%"
              clearable
          >
            <el-option
                v-for="i in 50"
                :key="i"
                :label="'s' + String(i).padStart(3, '0')"
                :value="'s' + String(i).padStart(3, '0')"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              @click="submitForm"
              :loading="submitting"
              style="width: 100%"
          >
            确认信息并进入系统
          </el-button>
        </el-form-item>
      </el-form>

      <el-alert
          title="请确保所有信息准确无误"
          type="warning"
          :closable="false"
          class="footer-alert"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref} from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from "axios";

const router = useRouter()

// 表单数据
const infoForm = ref({
  examRoom: '',
  studentName: '',
  examNumber: '',
  machineId: '',
  schoolId:''
})

// 表单引用
const infoFormRef = ref(null)

// 加载状态
const submitting = ref(false)


// 表单验证规则
const rules = {
  studentName: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在2到10个字符', trigger: 'blur' }
  ],
  examNumber: [
    { required: true, message: '请输入班级编号', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
  ],
  machineId: [
    { required: true, message: '请选择机器编号', trigger: 'change' }
  ]
}


// 提交表单
// 提交表单
// 保留 submitForm 逻辑，删除 saveStudentInfo
const submitForm = async () => {
  try {
    const valid = await infoFormRef.value.validate()
    if (!valid) {
      ElMessage.error('请填写完整信息')
      return
    }
    submitting.value = true

    // 处理 machineId：提取数字部分并转为整数
    let machineIdVal = infoForm.value.machineId;
    if (machineIdVal) {
      machineIdVal = parseInt(machineIdVal.replace('s', ''), 10);
    }

    // 提交数据到后端校验
    const response = await axios.post('http://localhost:8088/api/add', {
      lasName: infoForm.value.examRoom,
      studentName: infoForm.value.studentName,
      examNumber: infoForm.value.examNumber,
      schoolId:infoForm.value.schoolId,
      machineId: machineIdVal, // 发送整数类型
      registerTime: new Date().toISOString()
    })

    if (response.data.code === 200) {
      // 使用命名路由（更安全）
      router.push({
        name: 'exam', // 使用命名路由
        params: {
          schoolId: infoForm.value.schoolId
        }
      })
    }
  } catch (error) {
    ElMessage.error('提交失败：' + error)
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.init-info-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--el-bg-color-page);
  padding: 20px;
}

.init-info-card {
  width: 100%;
  max-width: 600px;
}

.card-header {
  text-align: center;
}

.card-header h2 {
  color: var(--el-text-color-primary);
  margin-bottom: 10px;
}

.card-header p {
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

.footer-alert {
  margin-top: 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .init-info-card {
    padding: 20px;
  }
}
</style>